<template>
  <main class="main-container">
    <el-table :data="tableData">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column prop="code" label="订单号" width="230"></el-table-column>

      <el-table-column prop="totalPrice" label="订单金额"></el-table-column>

      <el-table-column prop="totalPrice" label="订单状态">
        <template #default="{ row }">
          <el-tag v-if="row.status === 1" type="info">待发货</el-tag>
          <el-tag v-else-if="row.status === 2" type="success">已发货</el-tag>
          <el-tag v-else-if="row.status === 3" type="warning">已完成</el-tag>
          <el-tag v-else type="danger">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="expressCode" label="快递单号"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      <el-table-column prop="createTime" label="发布时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            link
            @click="
              editVisible = true;
              orderInfo = JSON.parse(JSON.stringify(row));
            "
            >详情</el-button
          >
          <!-- <el-button type="danger" link @click="del(row.id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      style="margin-top: 20px"
      v-model:current-page="queryParams.page"
      @current-change="getData"
    />
    <el-drawer title="订单详情" v-model="editVisible">
      <el-descriptions title="订单信息" :column="2">
        <el-descriptions-item label="订单号">{{
          orderInfo?.code
        }}</el-descriptions-item>
        <el-descriptions-item label="订单金额"
          >￥{{ orderInfo?.totalPrice }}</el-descriptions-item
        >
        <el-descriptions-item label="订单状态">
          {{ getOrderStatus(orderInfo!.status) }}
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">
          {{ orderInfo?.createTime }}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider />
      <el-descriptions title="收货信息" :column="2">
        <el-descriptions-item label="收货人">{{
          orderInfo?.deliveryAddress.contacts || "无"
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          orderInfo?.deliveryAddress.phone || "无"
        }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">
          {{ orderInfo!.deliveryAddress.address || "无" }}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider />
      <h4>商品信息</h4>
      <el-table :data="orderInfo?.products" border>
        <el-table-column prop="title" label="商品名称"></el-table-column>
        <el-table-column prop="pic" label="图片">
          <template #default="{ row }">
            <img
              :src="fileUrl + row.pic"
              alt="商品图片"
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" align="center">
          <template #default="{ row }"> x {{ row.quantity }} </template>
        </el-table-column>
        <el-table-column prop="price" label="价格">
          <template #default="{ row }">
            <span style="color: red"> ￥{{ row.price }} </span>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button type="primary" @click="submit" v-if="orderInfo?.status == 1"
          >发货</el-button
        >
      </template>
    </el-drawer>
  </main>
</template>
<script setup lang="ts">
import { ref } from "vue";
import productService from "@/api/product";
import type { Order, Product, ProductResponse } from "@/api/types";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { fetchOrders, shipOrder } from "@/api/order";
const fileUrl = window.config.fileUrl;
const baseUrl = window.config.baseUrl;
const tableData = ref<Order[]>([]);
const editVisible = ref(false);
const orderInfo = ref<Order>();
const getOrderStatus = (orderStatus: number) => {
  switch (orderStatus) {
    case 1:
      return "待发货";
    case 2:
      return "已发货，待收货";
    case 3:
      return "已完成";
    default:
      return "已完成";
  }
};
const submit = async () => {
  ElMessageBox.prompt("填写快递单号", "发货", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(async ({ value }) => {
      await shipOrder(orderInfo.value!.id, value);
      editVisible.value = false;
      getData();
      ElMessage.success("提交成功");
    })
    .catch(() => {});
};
const queryParams = {
  page: 1,
  limit: 10,
};
const total = ref(0);
const getData = async () => {
  let res = await fetchOrders(queryParams.page, queryParams.limit);
  tableData.value = res.data.orders;
  total.value = res.data.totalCount;
};
getData();
</script>
<style scoped lang="less"></style>
